<template>
  <div class="lan-table-container">
    <div class="table">
      <el-table
        :size="size"
        stripe
        border
        :data="tableData"
        @sort-change="onSortChange"
        @selection-change="onSelectionChange"
      >
        <el-table-column
          v-for="column in config.columnList"
          :key="column.label"
          :label="column.label"
          :prop="column.name"
          :type="['index','selection','expand'].includes(column.type)?column.type:'' "
          align="center"
          :fixed="column.fixed"
          :sortable="column.sortable?'custom':false"
          :width="column.width"
          :min-width="column.minWidth"
        >
          <template
            v-slot="scope"
            v-if="column.type && (!['index','selection'].includes(column.type))"
          >
            <div
              v-if="column.type==='button'"
              :style="getColumnStyle(column,scope.row)"
            >
              <el-button
                v-show="button.isShow?button.isShow:true"
                v-for="button in column.buttons"
                :key="button.text"
                :type="button.type||'text'"
                :icon="button.icon"
                :size="button.size"
                :plain="button.plain"
                :round="button.round"
                :circle="button.circle"
                @click="button.method(scope.row)"
                :disabled="button.disabled"
              >{{ button.text }}</el-button>
            </div>
            <div
              v-if="column.type==='formatter'"
              :style="getColumnStyle(column,scope.row)"
            >{{ column.formatter(scope.row[column.name]) }}</div>
            <div
              v-if="column.type==='image'"
              :style="getColumnStyle(column,scope.row)"
            >
              <el-image
                style="width: 100px; height: 100px"
                :fit="cover"
                v-if="scope.row[column.name]"
                :src="scope.row[column.name]"
                :preview-src-list="[scope.row[column.name]]"
              >
                <div
                  slot="error"
                  class="image-slot"
                >
                  <span>加载失败</span>
                </div>
              </el-image>
            </div>
            <div
              v-if="column.type==='slot'||column.type==='expand'"
              :style="getColumnStyle(column,scope.row)"
            >
              <slot
                :name="column.name"
                :row="scope.row"
              ></slot>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination">
      <el-pagination
        background
        @size-change="pageSizeChangeHandler"
        @current-change="currentPageChangeHandler"
        :current-page.sync="config.currentPage"
        :page-size.sync="config.pageSize"
        :page-sizes="config.pageSizes"
        layout="total,sizes, prev, pager, next, jumper"
        :total="config.totalCount"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import { SortType } from '../constants/common';
export default {
  props: {
    tableData: {
      type: Array,
      default: () => []
    },
    size: {
      type: String
    },
    config: {
      type: Object,
      default: () => {}
    }
  },
  methods: {
    pageSizeChangeHandler() {
      this.config.currentPage = 1;
      this.$emit('search');
    },
    currentPageChangeHandler() {
      this.$emit('search');
    },
    getColumnStyle(column, row) {
      const style = {};
      if (column.style) {
        for (let item in column.style) {
          typeof column.style[item] === 'function' ? (style[item] = column.style[item](row[column.name])) : (style[item] = column.style[item]);
        }
      }
      return style;
    },
    onSelectionChange(selection) {
      this.$emit('selection-change', selection);
    },
    onSortChange(sort) {
      this.config.sort.orderBy = sort.prop;
      this.config.sort.sortType = sort.order === 'descending' ? SortType.DESC : SortType.ASC;
      this.$emit('search');
    }
  }
};
</script>

<style lang="scss" scoped>
.lan-table-container {
  .table {
    padding: 10px;
    background: #fff;
  }
  .pagination {
    background: #fff;
    text-align: right;
    padding: 10px;
  }
}
</style>
